<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >

<head>
    <th:block th:include="include :: header('选项卡 & 面板')"/>
    <style>
        .btn {
            padding: 3px 6px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeIn">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>条件查询</h5>
                </div>
                <div class="ibox-content">

                    <div class="row">
                        <form id="formId">
                            <div class="select-list">
                                <ul>
                                    <li>
                                        <p>项目名称：</p>
                                        <input type="text" name="projectName"/>
                                    </li>
                                    <li>
                                        <p>项目状态：</p>
                                        <select name="projectStatus">
                                            <option value="">所有</option>
                                            <option value="1">启用</option>
                                            <option value="0">禁用</option>
                                        </select>
                                    </li>
                                    <li>
                                        <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                                class="fa fa-search"></i>&nbsp;搜索</a>
                                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                                class="fa fa fa-undo"></i>&nbsp;重置</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox">
                <div class="ibox-title">
                    <h5 class="col-md-1">项目列表</h5>
                    <a class="btn btn-primary" onclick="add()" style="padding: 0px 8px;">
                        <i class="fa fa-edit"></i> 添加
                    </a>
                </div>
                <div class="ibox-content">

                    <div class="row">
                        <div class="col-sm-3">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    默认面板
                                </div>
                                <div class="panel-body">
                                    <p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。
                                        为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="panel panel-primary">
                                <div class="panel-heading">
                                    主要
                                </div>
                                <div class="panel-body">
                                    <p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。
                                        为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="panel panel-success">
                                <div class="panel-heading">
                                    成功
                                </div>
                                <div class="panel-body">
                                    <p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。
                                        为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
                                </div>
                            </div>
                        </div>
                        <!--                        </div>-->
                        <!--                        <div class="row">-->
                        <div class="col-sm-3">
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <i class="fa fa-info-circle"></i> 信息
                                </div>
                                <div class="panel-body">
                                    <p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。
                                        为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
                                </div>
                                <div class="panel-footer">
                                    <a class="btn btn-success single" onclick="removeAll()">
                                        <i class="fa fa-edit"></i> 修改
                                    </a>
                                    <a class="btn btn-warning single" onclick="removeAll()">
                                        <i class="fa fa-refresh"></i> 同步
                                    </a>
                                    <a class="btn btn-danger single" onclick="removeAll()">
                                        <i class="fa fa-remove"></i> 删除
                                    </a>
                                </div>

                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="panel panel-warning">
                                <div class="panel-heading">
                                    <i class="fa fa-warning"></i> 警告
                                </div>
                                <div class="panel-body">
                                    <p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。
                                        为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="panel panel-danger">
                                <div class="panel-heading">
                                    危险
                                </div>
                                <div class="panel-body">
                                    <p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。
                                        为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
                                </div>
                                <div class="panel-footer">
                                    <a class="btn btn-success single" onclick="removeAll()">
                                        <i class="fa fa-edit"></i> 修改
                                    </a>
                                    <a class="btn btn-warning single" onclick="removeAll()">
                                        <i class="fa fa-refresh"></i> 同步
                                    </a>
                                    <a class="btn btn-danger single" onclick="removeAll()">
                                        <i class="fa fa-remove"></i> 删除
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>
<th:block th:include="include :: footer"/>
</body>
</html>
